<template>
	<div id='orgChart'>
		<div class="title">{{title}}</div>
		<div class="content">
      <div id="org_map_panel" class="org_map_panel animated zoomIn">
        <div class="top_content clearfix">
          <div class="panel_item parent">
            <div class="panel_item_content">
              <div class="panel_title">
                <span class=" edit iconfont">&#xe607;</span>
                 <div class="edit_item">
                  <div class="edit_item_content">
                    <ul>
                      <li><span v-touch-ripple
                                @click="addOrg('lower',topData.orgId,topData.orgName)">Add Lower-level Org</span></li>
                      <li v-if="topData.parentOrgId">
                        <span v-touch-ripple @click="addOrg('peer',topData.parentOrgId)">Add Peer Org</span>
                      </li>
                      <!--<li><span class="iconfont half" title="archive" @click="verifyArchiveOrg(topOrgStructure[0])">&#xe610;</span><span
                        class="iconfont half" title="delete"
                        @click="deleteOrg(topOrgStructure[0].uuid)">&#xe60d;</span>
                      </li>-->
                    </ul>
                  </div>
                </div>
              </div>
              <div class="panel_body">
                <div class="text-ellipsis">{{topData.orgName}}</div>
                <div class="text-ellipsis">{{topData.orgShortName}}</div>
                <div class="text-ellipsis">{{topData.location}}</div>
               <div v-show="topData.parentOrgId" class="hidden_div">
                  <div>
                    <a href="javascript:;" class="active" data-type="on" :data-orgId="topData.orgId" @click="findTopOrganization(topData.parentOrgId)">show superior org</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <ul id="bottom_content" class="bottom_content" v-if="bottomData&&bottomData.length!=0"
            transition="fade">
          <li class="panel_item"  v-for="(item,key) in bottomData" :key="item">
            <div class="panel_item_content">
              <div class="panel_title">
                <span class=" edit iconfont">&#xe607;</span>
                <div class="edit_item">
                  <div class="edit_item_content">
                    <ul>
                      <li><span v-touch-ripple @click="addOrg('lower',item.orgId,item.orgName)">Add Lower-level Org</span></li>
                      <li><span v-touch-ripple @click="addOrg('peer',item.parentOrgId)">Add Peer Org</span></li>
                      <!--<li><span class="iconfont half" title="archive" @click="verifyArchiveOrg(item)">&#xe610;</span><span class="iconfont half" title="delete" @click="deleteOrg(item.uuid)">&#xe60d;</span>
                      </li>-->
                    </ul>
                  </div>
                </div>
              </div>
              <div class="panel_body">
                <div class="text-ellipsis">{{item.orgName}}</div>
                <div class="text-ellipsis">{{item.orgShortName}}</div>
                <div class="text-ellipsis">{{item.location}}</div>
                <div class="hidden_div">
                  <div><a href="javascript:;" class="active" data-type="on" :data-orgId="item.orgId" @click="findBottomOrganization(item,item.children,$event)">show lower org</a></div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		name: 'id',
		components: {},
		created(){
      this.init();
    },
		computed:{
		   orgTreeList(){
		      return this.$store.getters.orgTreeList;
      }
    },
		watch:{
      orgTreeList(value){
        this.topData = value[0];
        this.bottomData = value[0].children;
      }
    },
		data () {
			return {
				title: 'Org Chart',
        topData:{},
        bottomData:[],
      }
		},
    methods:{
      init(){
        this.getOrgTreeData();
      },
      getOrgTreeData(){
        this.$store.dispatch('getOrgTreeList');
      },
      findBottomOrganization(item,children,e){
      	var t = this;
      	if(children.length){
          var $fromEle=$(e.target).closest(".panel_item");
          var $toEle=$(".top_content .panel_item").first();
          var callback=function () {
            t.topData = item;
            t.bottomData = children;
          };
          t.fadeAnimate($fromEle,$toEle,callback);
        }else{
          t.$Message.warning('no lower level organization')
        }
      },
      findTopOrganization(parentId){
      	var parent = this.findOrgById(parentId,this.orgTreeList);
        if(parent){
          this.topData = parent;
          this.bottomData = parent.children;
        }else{
          this.$Message.warning('no peer level organization')
        }

      },
      addOrg(type,orgId,orgName){
        var parentOrgId,parentOrgName;
        if(type == 'lower'){
          parentOrgId = orgId;
          parentOrgName = orgName;
        }else{
          var data = this.findOrgById(orgId,this.orgTreeList);
          parentOrgId = data.parentOrgId;
          parentOrgName = data.orgName;
        }
        this.$router.push({path:'/views/org/company/addOrganization',query:{parentOrgId:parentOrgId,parentOrgName:parentOrgName}})
      },
      findOrgById(id,data){
        for(var i=0;i<data.length;i++){
          if(data[i].orgId == id){
          	return data[i];
          }else{
          	if(data[i].children&&data[i].children.length){
              return this.findOrgById(id,data[i].children);
            }
          }
        }
      },
      fadeAnimate:function ($fromEle,$toELe,callback) {

        var fromPosition = $fromEle.offset();
        var toPosition = $toELe.offset();
        var div = $fromEle.clone();
        $(div).css("position","absolute").css("top",fromPosition.top).css("left",fromPosition.left);
        $(div).find(".hidden_div").remove();
        $("body").append(div);
        $(div).animate({
          top:toPosition.top,
          left:toPosition.left
        },300,function () {
          $(div).remove();
          if(callback && typeof callback == 'function'){
            callback();
          }
        });
      },
    }
	}
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss" scoped>
	@import "src/assets/css/variable.scss";

	#orgChart {
    >.content{
      .org_map_panel {
        margin: 50px auto;
        transition: all .3s;
        .top_content, .bottom_content {
          display: block;
          text-align: center;
          position: relative;
          transition: all .3s;
          padding: 40px 0;
        }
        .top_content {
          .panel_item {
            .panel_title {
              background-color: $baseColor;
            }
            &.archive {
              .panel_title {
                background-color: #bbb;
                .edit_item {
                  display: none !important;
                }
              }
              .hidden_div {
                background-color: #bbb;
                display: none !important;
              }

            }
          }
        }
        .hidden_div {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          background-color: $baseColor;
          border-radius: 0 0 8px 8px;
          color: #fff;
          transition: all .25s;
          height: 0;
          overflow: hidden;
          > div {
            height: 50%;
            text-align: center;
            line-height: 80px;
            color: #fff;
            font-size: 16px;
            > a {
              position: relative;
              color: #fff;
              .count {
                position: absolute;
                right: -25px;
                top: 0;
                background-color: #ed6c2b;
                padding: 0 5px;
                line-height: 20px;
              }
              &.active:hover {
                text-decoration: underline;
              }
            }
          }
        }
        .bottom_content {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          position: relative;
          .panel_item {
            margin-bottom: 40px;
            .panel_title {
              background-color: #02c5c5;
            }
            .hidden_div {
              background-color: #02c5c5;
            }
            &:before {
              content: '';
              position: absolute;
              width: 100%;
              height: 30px;
              left: calc(50% + 3px);
              top: -40px;
              border-left: 1px #c9c9c9 solid;
              border-top: 1px #c9c9c9 solid; ;
            }
            &:last-child:before{
              border-top:0
            }
            &.line:before {
              content: '';
              position: absolute;
              width: 100%;
              height: 30px;
              left: calc(50% + 2px);;
              top: -40px;
              border-top: 1px #c9c9c9 solid;
              border-right: 1px #c9c9c9 solid;
            }

            &.archive {
              .panel_title {
                background-color: #bbb;
                .edit_item {
                  display: none !important;
                }
              }
              .hidden_div {
                background-color: #bbb;
                display: none !important;
              }

            }
          }
          &:before {
            content: '';
            position: absolute;
            width: 1px;
            height: 30px;
            left: calc(50% + 3px);
            top: -30px;
            transition: all .25s;
            background-color: #c9c9c9;
          }
        }
      }

      .fade-transition {
        transition: all .2s ease;
        opacity: 1;
        transform: translate(0, 0);
      }

      .fade-enter, .fade-leave {
        opacity: 0;
        transform: translate(0, -10%);
      }
    }

    .panel_item {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      padding: 10px 20px;
      .panel_item_content {
        width: 180px;
        height: 120px;
        position: relative;
        border-radius: 8px;
        box-shadow: 1px 1px 10px 2px #ccc;
        .panel_title {
          position: relative;
          background-color: #02c5c5;
          border-radius: 8px 8px 0 0;
          border-bottom: 1px #ddd solid;
          font-size: 16px;
          line-height: 27px;
          height: 27px;
          color: #fff;
          padding: 0 12px;
          .edit {
            color: #fff;
            float: right;
            font-size: 16px;
            cursor: pointer;
            &:hover {
              opacity: .5;
            }
          }
          &:hover {
            .edit_item {
              display: block;
              animation: fade-in .3s;
            }
          }
          .edit_item {
            position: absolute;
            right: -200px;
            padding-left: 20px;
            top: 0;
            z-index: 101;
            display: none;
            .edit_item_content {
              width: 180px;
              box-sizing: border-box;
              background-color: #fff;
              color: #333;
              box-shadow: -3px 1px 13px 1px rgba(0, 0, 0, .3);
              border-radius: 4px;
              font-size: 12px;
              text-align: left;
              li {
                cursor: pointer;
                height: 40px;
                line-height: 40px;
                border-radius: 8px;
                text-align: center;
                border-bottom: 1px #efefef solid;
                span {
                  display: inline-block;
                  width: 80%;
                  height: 26px;
                  line-height: 26px;
                  margin-top: 7px;
                  border-radius: 8px;
                  &.half {
                    width: 40%;
                    border-radius: 0;
                    &:first-child {
                      border-right: 1px #ddd solid;
                    }
                    &:hover {
                      color: $baseColor;
                    }
                  }
                }
                &:hover {
                  span:not(.half) {
                    background-color: $baseColor;
                    color: #fff;
                  }
                }
              }
              &:before {
                content: "";
                position: absolute;
                left: 0px;
                top: 8px;
                width: 0;
                border: 10px transparent solid;
                border-right-color: #fff;
              }

            }
          }
        }
        .panel_body {
          line-height: 22px;
          padding: 10px 20px;
          font-size: 14px;
          text-align: left;
          color: #000;
          position: relative;
          &:hover {
            .hidden_div {
              display: block;
              height: 100px;
            }
          }
        }
        .hidden_div {
          background-color: $baseColor;
        }
      }
    }

    .org_info_modal_body {
      padding: 0 40px;
      height: 500px;
      .base_org_info_content {
        margin-bottom: 20px;
        height: 190px;
        overflow-y: auto;
        .title {
          line-height: 40px;
          border-bottom: 1px #efefef solid;
          position: relative;
          margin-bottom: 20px;
          .edit {
            color: #999;
            cursor: pointer;
            &:hover {
              color: $baseColor;
            }
          }
          &:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100px;
            height: 1px;
            background-color: $baseColor;
          }
        }
        .base_org_group_line {
          width: 50%;
          float: left;
          line-height: 30px;
          .key, .value {
            display: inline-block;
          }
          .value {
            padding-left: 8px;
          }
        }
      }
      table {
        width: 600px;
      }
    }

    .input_line {
      line-height: 50px;
      .label {
        display: inline-block;
        width: 40%;
        text-align: right;
        padding-right: 20px;
        position: relative;
        &.isMust:after {
          content: '*';
          color: #fabe05;
          position: absolute;
          right: 5px;
          font-size: 20px;
          line-height: 56px;
        }
      }
      .input {
        width: 40%;
      }
    }

    .btn_group {
      button {
        margin: 0 4px;
      }
      text-align: right;
    }

    .archive_content{
      padding: 10px 40px;
    }

	}
  .panel_item {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    padding: 10px 20px;
    .panel_item_content {
      width: 180px;
      height: 120px;
      position: relative;
      border-radius: 8px;
      box-shadow: 1px 1px 10px 2px #ccc;
      .panel_title {
        position: relative;
        background-color: #02c5c5;
        border-radius: 8px 8px 0 0;
        border-bottom: 1px #ddd solid;
        font-size: 16px;
        line-height: 27px;
        height: 27px;
        color: #fff;
        padding: 0 12px;
        .edit {
          color: #fff;
          float: right;
          font-size: 16px;
          cursor: pointer;
          &:hover {
            opacity: .5;
          }
        }
        &:hover {
          .edit_item {
            display: block;
            animation: fade-in .3s;
          }
        }
        .edit_item {
          position: absolute;
          right: -200px;
          padding-left: 20px;
          top: 0;
          z-index: 101;
          display: none;
          .edit_item_content {
            width: 180px;
            box-sizing: border-box;
            background-color: #fff;
            color: #333;
            box-shadow: -3px 1px 13px 1px rgba(0, 0, 0, .3);
            border-radius: 4px;
            font-size: 12px;
            text-align: left;
            li {
              cursor: pointer;
              height: 40px;
              line-height: 40px;
              border-radius: 8px;
              text-align: center;
              border-bottom: 1px #efefef solid;
              span {
                display: inline-block;
                width: 80%;
                height: 26px;
                line-height: 26px;
                margin-top: 7px;
                border-radius: 8px;
                &.half {
                  width: 40%;
                  border-radius: 0;
                  &:first-child {
                    border-right: 1px #ddd solid;
                  }
                  &:hover {
                    color: $baseColor;
                  }
                }
              }
              &:hover {
                span:not(.half) {
                  background-color: $baseColor;
                  color: #fff;
                }
              }
            }
            &:before {
              content: "";
              position: absolute;
              left: 0px;
              top: 8px;
              width: 0;
              border: 10px transparent solid;
              border-right-color: #fff;
            }

          }
        }
      }
      .panel_body {
        line-height: 22px;
        padding: 10px 20px;
        font-size: 14px;
        text-align: left;
        color: #000;
        position: relative;
        &:hover {
          .hidden_div {
            display: block;
            height: 100px;
          }
        }
      }
      .hidden_div {
        background-color: $baseColor;
      }
    }
  }
</style>
